<template>
  <div class="c-bg-sgray">
    <div class="fixTop">
      <new-search-bar
        :searchFixed="true"
        @search='startSearch'
        @cancel='startSearch'
      ></new-search-bar>
    </div>
    <div class="c-pt104 c-ph24">
      <div v-for="(item) in myCircleList" class="c-flex-row c-pv24 c-ph24 c-bg-white c-mb24 c-br16" :key="item.circleId" @click="handleClickCircleFeed(item.circleId)">
        <div class="c-ww120 c-hh120 c-br12">
          <img
            class="c-w100 c-br12 c-h c-object-fit-cover"
            :src="$addXossFilter(item.avatar || require('@/assets/defult270.png'))"
            alt=""
          >
        </div>
        <div class="c-flex-grow1 c-flex-column c-justify-sb c-w0 c-pl16">
          <p class="c-fs24 c-text-ellipsis1 c-fc-xblack c-fw-b">{{item.name}}</p>
          <div class="circle_m" v-if="item.isCircleMaster == true"></div>
          <div class="c-fs18 c-flex-row c-justify-sb c-aligni-center c-fc-xmlred">
            <div class="c-flex-row c-aligni-center c-flexw-wrap c-lh26">
              <span class="c-fc-xmlred c-fw600">
                <span v-if="item.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                <span :class="checkCnPrice(item.payType, item.price, ckFrom.circle) ? 'c-fs22' : 'c-fs26'">{{item.payType | priceValueFilter(item.price, ckFrom.circle, item.optimal, 'list')}}</span>
              </span>
              <span v-if="isShowcrossedPrice(item)" class="c-lh18 c-fs18 c-fc-gray c-text-decoration-through c-ml10">￥{{getCrossedPrice(item)}}</span>
            </div>
            <div class="c-fc-gray">
              <span>{{item.memberCount | formatTenThousand}}人加入</span> |
              <span>{{item.feedCount | formatTenThousand}}条动态</span>
            </div>
          </div>
        </div>
      </div>
      <loading-status-tem
        :dataStatus="dataStatus"
        noDataText="暂无结果"
        class="c-bg-sgray"
      ></loading-status-tem>
    </div>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 10;
let pageIndex = 0;
let page = 1;
let searchText; //搜索输入框
export default {
  name: "MyCircle",
  components: {
    newSearchBar,
    loadingStatusTem
  },
  data() {
    return {
      ckFrom: global.ckFrom,
      dataStatus: 'HAS_MORE_DATA',
      myCircleList: [],
    }
  },
  computed: {
    // 判断显示划线价格
    isShowcrossedPrice() {
      return function(item) {
        return !this.$isWxAppIos() && item.crossedPrice && Number(item.crossedPrice) > 0;
      }
    },
    // 获取划线价格
    getCrossedPrice() {
      return function(item) {
        return item.crossedPrice;
      }
    }
  },
  activated() {
    setDocumentTitle("我的圈子");
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
     checkCnPrice(payType, price, prodType) {
      return utilJs.checkCnPrice(payType, price, prodType)
    },
    initData() {
      pageIndex = 0;
      page = 1;
      searchText = '';
      this.dataStatus = 'HAS_MORE_DATA';
      this.myCircleList = [];
      this.getMyCircleList();
    },
    handleClickCircleFeed(id) {
      let toPath = `/homePage/circle/circleFeed?id=${id}`;
      this.iosAppRouteChange(toPath);
    },
    startSearch(e) {
      page = 1;
      this.myCircleList = [];
      searchText = e.searchValue;
      this.getMyCircleList();
    },
    getMyCircleList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getMyCircleList?circleName=${searchText}&index=${pageIndex}&page=${page}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.myCircleList = res.data;
        } else {
          this.myCircleList = [...this.myCircleList, ...res.data];
        }
        if (res.total * 1 == this.myCircleList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex += LIMIT;
          page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR"
      })
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.myCircleList.length > 0) {
          this.getMyCircleList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = '我的圈子';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '我的圈子';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
.fixTop {
  position: fixed;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
}
.c-pt104 {
  padding-top: 2.6rem;
}
.circle_m {
  display: inline-block;
  width: 1.95rem;
  height: 0.7rem;
  background: url("../../../assets/i/wap/circle/circle_m.png") no-repeat center center;
  background-size: contain;
}
.c-pt108{padding-top: 2.7rem;}
</style>